<template>
  <div class="home">
    <el-row :gutter="20">
      <div class="bar-pie1">
        <el-card
          style="width: 49%; height: 400px; margin-bottom: 20px; background: url(./images/bg1.png)"
        >
          <div id="line" ref="lineChart"></div>
        </el-card>
        <el-card style="width: 49%; height: 400px; background: url(./images/bg1.png)">
          <div id="bar1" ref="barChart1"></div>
        </el-card>
      </div>
      <div class="bar-pie">
        <el-card style="width: 49%; height: 400px; background: url(./images/bg1.png)">
          <div id="bar" ref="barChart"></div>
        </el-card>
        <el-card style="width: 49%; height: 400px; background: url(./images/bg1.png)">
          <div id="pie" ref="pieChart"></div>
        </el-card>
      </div>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
import { reactive, ref, onMounted } from 'vue'

const router = useRouter()
const route = useRoute()

const reviewmenu = ref([])

const goHome = () => {
  router.push('/')
}
type allinformation = {
  //餐厅日销售
  name: null
  month: string
  date: string
  number: string
  person: string
  avgprice: string
  money: string
}

const dateinformation = ref([] as allinformation[])
const dateinformation1 = ref([] as allinformation[])
const fetchData = () => {
  //餐厅日销售
  axios({
    method: 'POST',
    params: {
      userid: window.localStorage.getItem('userID')
    },
    url: 'http://localhost:8080/data/usermonthdate',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    dateinformation.value = data.data
    console.log(res)
    drawCharts()
  })
}
const fetchData1 = () => {
  //餐厅日销售
  axios({
    method: 'POST',
    params: {
      userid: window.localStorage.getItem('userID')
    },
    url: 'http://localhost:8080/data/useralldate',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    dateinformation1.value = data.data
    console.log(res)
    drawCharts()
  })
}
onMounted(() => {
  fetchData()
  fetchData1()
})

const drawCharts = () => {
  const lineChart = echarts.init(document.getElementById('line'))
  const barChart = echarts.init(document.getElementById('bar'))
  const barChart1 = echarts.init(document.getElementById('bar1'))
  const pieChart = echarts.init(document.getElementById('pie'))

  // 绘制曲线图
  lineChart.setOption({
    title: {
      text: '每月消费额',
      textStyle: {
        align: 'center',
        color: '#fff',
        fontSize: 20
      },
      top: '3%',
      left: '0%'
    },

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '15%',
      right: '3%',
      left: '5%',
      bottom: '12%'
    },
    xAxis: [
      {
        type: 'category',
        data: dateinformation.value.map((item) => item.month),
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0.12)'
          }
        },
        axisLabel: {
          margin: 10,
          color: '#e2e9ff',
          textStyle: {
            fontSize: 14
          }
        }
      }
    ],
    yAxis: [
      {
        axisLabel: {
          formatter: '{value}',
          color: '#e2e9ff'
        },
        axisLine: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0.12)'
          }
        }
      }
    ],
    series: [
      {
        type: 'bar',
        data: dateinformation.value.map((item) => item.money),
        barWidth: '20px',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(0,244,255,1)' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(0,77,167,1)' // 100% 处的颜色
                }
              ],
              false
            ),
            barBorderRadius: [30, 30, 30, 30],
            shadowColor: 'rgba(0,160,221,1)',
            shadowBlur: 4
          }
        },
        label: {
          normal: {
            show: true,
            lineHeight: 30,
            width: 80,
            height: 30,
            backgroundColor: 'rgba(0,160,221,0.1)',
            borderRadius: 200,
            position: ['-8', '-60'],
            distance: 1,
            formatter: ['    {d|●}', ' {a|{c}}     \n', '    {b|}'].join(','),
            rich: {
              d: {
                color: '#3CDDCF'
              },
              a: {
                color: '#fff',
                align: 'center'
              },
              b: {
                width: 1,
                height: 30,
                borderWidth: 1,
                borderColor: '#234e6c',
                align: 'left'
              }
            }
          }
        }
      }
    ]
  })
  var xData = dateinformation.value.map((item) => item.month)
  // 绘制柱状图
  barChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        textStyle: {
          color: '#fff'
        }
      }
    },
    grid: {
      borderWidth: 0,
      top: 110,
      bottom: 95,
      textStyle: {
        color: '#fff'
      }
    },
    legend: {
      x: '46%',
      top: '11%',
      textStyle: {
        color: '#90979c'
      },
      data: ['投诉数', '评价数']
    },

    calculable: true,
    xAxis: [
      {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: 'rgba(204,187,225,0.5)'
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        data: xData
      }
    ],

    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(204,187,225,0.5)'
          }
        }
      }
    ],

    series: [
      {
        name: '投诉数',
        type: 'line',
        symbolSize: 10,
        symbol: 'circle',
        itemStyle: {
          color: '#6f7de3'
        },
        markPoint: {
          label: {
            normal: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          data: [
            {
              type: 'max',
              name: '最大值'
            },
            {
              type: 'min',
              name: '最小值'
            }
          ]
        },
        data: dateinformation.value.map((item) => item.number)
      },
      {
        name: '评价数',
        type: 'line',
        symbolSize: 10,
        symbol: 'circle',
        itemStyle: {
          color: '#c257F6'
        },
        markPoint: {
          label: {
            normal: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          data: [
            {
              type: 'max',
              name: '最大值'
            },
            {
              type: 'min',
              name: '最小值'
            }
          ]
        },
        data: dateinformation.value.map((item) => item.person)
      }
    ]
  })
  barChart1.setOption({
    tooltip: {
      trigger: 'item'
    },
    graphic: [
      {
        type: 'text',
        left: '22%',
        top: '38%',
        style: {
          text: dateinformation1.value.person,
          fill: '#00D6CE',
          fontSize: 65
        }
      },
      {
        type: 'text',
        left: '16%',
        top: '53%',
        style: {
          text: '总评价数',
          fill: '#fff',
          font: 'normal 1.8em "Microsoft YaHei", sans-serif'
        }
      },
      {
        type: 'text',
        left: '73%',
        top: '38%',
        style: {
          text: dateinformation1.value.number,
          fill: '#FDA12E',
          fontSize: 65
        }
      },
      {
        type: 'text',
        left: '67%',
        top: '53%',
        style: {
          text: '总投诉数',
          fill: '#fff',
          font: 'normal 1.8em "Microsoft YaHei", sans-serif'
        }
      }
    ],
    series: [
      {
        name: '',
        type: 'gauge',
        radius: '60%',
        center: ['25%', '50%'],
        startAngle: 0,
        endAngle: 359.9,
        splitNumber: 90,
        hoverAnimation: true,
        axisTick: {
          show: false
        },
        splitLine: {
          length: 50,
          lineStyle: {
            width: 5,
            color: '#000'
          }
        },
        axisLabel: {
          show: false
        },
        pointer: {
          show: false
        },
        axisLine: {
          lineStyle: {
            opacity: 0
          }
        },
        detail: {
          show: false
        },
        data: [
          {
            value: 0,
            name: ''
          }
        ]
      },
      {
        name: '',
        type: 'pie',
        radius: ['45%', '51%'],
        center: ['25%', '50%'],
        silent: true,
        z: 0,
        zlevel: 0,
        label: {
          normal: {
            show: false,
            position: 'center'
          }
        },
        data: [
          {
            value: 60.5,
            name: '',
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: '#08A0E2'
              }
            }
          },
          {
            value: 90.6,
            name: '',
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: '#05D3CB'
              }
            }
          },
          {
            value: 90.6,
            name: '',
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: '#4A4C54'
              }
            }
          }
        ]
      },
      {
        name: '',
        type: 'gauge',
        radius: '60%',
        center: ['75%', '50%'],
        startAngle: 0,
        endAngle: 359.9,
        splitNumber: 90,
        hoverAnimation: true,
        axisTick: {
          show: false
        },
        splitLine: {
          length: 50,
          lineStyle: {
            width: 5,
            color: '#000'
          }
        },
        axisLabel: {
          show: false
        },
        pointer: {
          show: false
        },
        axisLine: {
          lineStyle: {
            opacity: 0
          }
        },
        detail: {
          show: false
        },
        data: [
          {
            value: 0,
            name: ''
          }
        ]
      },
      {
        name: '',
        type: 'pie',
        radius: ['45%', '51%'],
        center: ['75%', '50%'],
        silent: true,
        z: 0,
        zlevel: 0,
        label: {
          normal: {
            show: false,
            position: 'center'
          }
        },
        data: [
          {
            value: 60.5,
            name: '',
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: '#38D742'
              }
            }
          },
          {
            value: 90.6,
            name: '',
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: '#C0A23A'
              }
            }
          },
          {
            value: 90.6,
            name: '',
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: '#4A4C54'
              }
            }
          }
        ]
      }
    ]
  })
  window.addEventListener('resize', function () {
    // 让我们的图表调用 resize这个方法
    bar.resize()
    line.resize()
    pie.resize()
  })

  var labelData = []
  var labelData1 = []
  for (var i = 0; i < 150; ++i) {
    labelData.push({
      value: 1,
      name: i,
      itemStyle: {
        normal: {
          color: 'rgba(0,209,228,0)'
        }
      }
    })
  }
  for (var i = 0; i < labelData.length; ++i) {
    if (labelData[i].name < 50) {
      labelData[i].itemStyle = {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#0ff'
            },
            {
              offset: 1,
              color: '#5467df'
            }
          ])
        }
      }
    }
  }
  for (var i = 0; i < 150; ++i) {
    labelData1.push({
      value: 1,
      name: i,
      itemStyle: {
        normal: {
          color: 'rgba(0,209,228,0)'
        }
      }
    })
  }
  for (var i = 0; i < labelData1.length; ++i) {
    if (labelData1[i].name < 150) {
      labelData1[i].itemStyle = {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#251f45'
            },
            {
              offset: 1,
              color: '#251f45'
            }
          ])
        }
      }
    }
  }
  // 绘制饼图
  pieChart.setOption({
    title: [
      {
        text: dateinformation1.value.money,
        x: '50%',
        y: '37%',
        textAlign: 'center',
        textStyle: {
          fontSize: '30',
          fontWeight: '100',
          color: '#0FF',
          textAlign: 'center'
        }
      },
      {
        text: '总消费金额',
        left: '50%',
        top: '52%',
        textAlign: 'center',
        textStyle: {
          fontSize: '18',
          fontWeight: '400',
          color: '#8d8793',
          textAlign: 'center'
        }
      },
      {
        text: 'DONUT CHART',
        left: '50%',
        top: '57%',
        textAlign: 'center',
        textStyle: {
          fontSize: '14',
          fontWeight: '400',
          color: 'rgba(65,63,112,1)',
          textAlign: 'center'
        }
      }
    ],
    polar: {
      radius: ['56%', '52%'],
      center: ['50%', '50%']
    },
    angleAxis: {
      max: 100,
      show: false
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: '',
        type: 'bar',
        roundCap: true,
        barWidth: 60,
        showBackground: true,
        backgroundStyle: {
          color: '#2e2856'
        },
        data: [80],
        coordinateSystem: 'polar',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: '#585fe1'
              },
              {
                offset: 1,
                color: '#0ff'
              }
            ])
          }
        }
      },
      {
        hoverAnimation: false,
        type: 'pie',
        z: 2,
        data: labelData,
        radius: ['43%', '50%'],
        zlevel: -2,
        itemStyle: {
          normal: {
            borderColor: '#180f2a',
            borderWidth: 2
          }
        },
        label: {
          normal: {
            position: 'inside',
            show: false
          }
        }
      },
      {
        hoverAnimation: false,
        type: 'pie',
        z: 1,
        data: labelData1,
        radius: ['43%', '50%'],
        zlevel: -2,
        itemStyle: {
          normal: {
            borderColor: '#180f2a',
            borderWidth: 2
          }
        },
        label: {
          normal: {
            position: 'inside',
            show: false
          }
        }
      }
    ]
  })

  // 监听窗口大小变化，自适应图表
  window.addEventListener('resize', () => {
    lineChart.resize()
    barChart.resize()
    pieChart.resize()
  })
}
</script>
<style scoped>
.home {
  width: 100%;
  height: 100%;
  background-color: rgb(2, 2, 63);

  .user-info {
    display: flex;
    align-items: center;

    .user-img {
      width: 150px;
      height: 150px;
      border-radius: 100%;
      margin-right: 40px;
    }

    & li:nth-child(1) {
      font-size: 30px;
    }

    & li:nth-child(2) {
      margin-top: 10px;
      font-size: 16px;
      color: rgb(153, 153, 153);
    }
  }

  .login-info {
    font-size: 14px;
    color: rgb(153, 153, 153);

    li {
      margin: 5px;

      span {
        margin-left: 50px;
      }
    }
  }

  .table {
    margin-top: 30px;
  }

  .num {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-card {
      width: 32%;
      height: 90px;
      margin-bottom: 20px;
      border: none;

      i {
        width: 90px;
        height: 100%;
        line-height: 90px;
        text-align: center;
        font-size: 30px;
        color: #fff;
      }

      ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 20px;

        li:nth-child(1) {
          font-size: 30px;
          color: #000;
          margin-bottom: 5px;
        }

        li:nth-child(2) {
          font-size: 15px;
          color: rgb(148, 148, 148);
        }
      }
    }
  }

  #line {
    width: 100%;
    height: 400px;
  }

  .bar-pie1 {
    width: 100%;
    display: flex;
    justify-content: space-between;

    #line {
      width: 100%;
      height: 400px;
    }

    #bar1 {
      width: 100%;
      height: 400px;
    }
  }

  .bar-pie {
    width: 100%;
    display: flex;
    justify-content: space-between;

    #pie {
      width: 100%;
      height: 400px;
    }

    #bar {
      width: 100%;
      height: 400px;
    }
  }
}
</style>
